<template>
  <div class="w-100 h-100 d-flex">
    <div style="width: 40%; height: 100%" v-if="showPie">
      <pie_bk
        :echartsId="echartsId"
        :echartsData="transData"
        v-if="transData"
      ></pie_bk>
    </div>
    <div style="flex-grow: 1; height: 100%">
      <div
        class="d-flex"
        style="font-family: 'OPPOSans-Regular'; font-size: 26px; color: #6c8097"
      >
        <span style="width: 200px">名称</span>
        <span style="flex-grow: 1">建成前</span>
        <span style="flex-grow: 1">建成后</span>
      </div>
      <div
        v-for="(item, index) in echartsData"
        class="d-flex"
        style="
          padding: 40px 0 0 0;
          color: #E6FDFF;
          height: 25%;
          font-family: 'OPPOSans-Regular';
          font-size: 26px;
          border-bottom: #5ce1ff solid 2px;
          line-height: 100%;
        "
      >
      <span :style="{ backgroundColor: color[index] }" class="color" ></span>
      <span style="width: 200px">
        <span>{{ item.name }} </span>
        </span>
        <span style="flex-grow: 1">{{ item.before }}%</span>
        <span style="flex-grow: 1">{{ item.after }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useFields } from "@/hook/useFields";

import CustomTableVue from "@/components/common/table/CustomTable.vue";
import pie_bk from "@/components/project/piebk_vue3.vue";
import { useOptions } from "@/hook/useOptions";

const color = useOptions().colors.value;
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
  showPie:{
    type:Boolean,
    default:false
  },
  echartsId: {
    type: String,
    default: () => [],
  },
});
const transData = ref();
onMounted(() => {
  transData.value = props.echartsData.map((item: any) => ({
    name: item.name,
    value: item.after,
  }));
});
</script>

<style scoped lang="less" >
.color {
    display: block;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  margin-right: 10px;

}
</style>
